<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container member_order use-table">
			<div class="container_status dflex_vertical_c">
				<div class="item_interval" v-for="(item, i) in stateDatas" :key="i">
					<el-button class="badge_txt" :class="{ active: item.name == state }" size="small" @click="cutSta(item)">{{ item.name }}</el-button>
					<v-countup class="badge" start-value="0" :end-value="item.cnt"></v-countup>
				</div>
			</div>
			<el-table
				row-key="_id"
				ref="etbl"
				:expand-row-keys="expandKeys"
				show-summary
				:summary-method="getSummaries"
				:height="tblHeight"
				:data="tableDatas"
				highlight-current-row
			>
				<el-table-column type="expand" width="70">
					<template slot-scope="props">
						<el-form label-position="left" inline>
							<div class="order_detail margin_b_20" v-for="(item, i) in props.row.order_id" :key="i">
								<div class="dflex_vertical_c padding_10">
									<el-image style="width: 90px" :src="item.goods_img" :preview-src-list="item.imgs" fit="contain"></el-image>
									<div class="order_detail_right margin_l_10 dflex_d_c dflex_sb">
										<div>{{ item.goods_name }}</div>
										<div class="dflex">
											<div class="bbb margin_r_30">×{{ item.goods_num }}</div>
											<div class="bbb margin_l_30">{{ item.goods_sku_name }}</div>
										</div>
										<div class="dflex_e">
											<div class="price margin_r_5">{{ item.goods_price / 100 }}</div>
											<div class="m_price">{{ item.goods_market_price / 100 }}</div>
										</div>
									</div>
								</div>
							</div>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="买家" align="center" width="300">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<el-image
								class="headimg_small"
								:src="scope.row.order_member_headimg || '/static/img/default.jpg'"
								:preview-src-list="scope.row.imgs"
								fit="contain"
							></el-image>
							<div class="margin_l_10">
								<div class="left_just">{{ scope.row.order_member_name }}</div>
								<div>{{ scope.row.orderId }}</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column property="create_time" label="下单时间" align="center"></el-table-column>
				<el-table-column label="订单总额" prop="order_total_money" align="center">
					<template slot-scope="scope">
						<div class="price">{{ scope.row.order_total_money / 100 }}</div>
					</template>
				</el-table-column>
				<el-table-column property="order_total_cnt" label="商品数" align="center"></el-table-column>
				<el-table-column property="order_from" label="订单来源" align="center"></el-table-column>
				<el-table-column property="state" label="订单状态" align="center"></el-table-column>
				<!-- <el-table-column property="order_pay_way" label="支付方式" align="center"></el-table-column> -->
			</el-table>
			<el-pagination
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import vCountup from 'vue-countupjs';
const db = uniCloud.database();
const __name = 'usemall-order, usemall-order-detail';
export default {
	components: {
		vCountup
	},
	data() {
		return {
			dataId: '',
			state: '全部',
			stateObj: {
				待付款: 0,
				待发货: 0,
				// 待评价: 0,
				已完成: 0,
				已取消: 0,
				售后结束: 0,
				全部: 0
			},
			stateDatas: [],
			req: {
				page: 1,
				rows: 10,
				orderby: 'create_time desc',
				state: ''
			},
			tblHeight: 0,
			tableDatas: [],
			tableTotal: 0,
			expandKeys: []
		};
	},
	methods: {
		async loadData() {
			this.stateDatas = [];
			for (let key in this.stateObj) {
				this.stateDatas.push({
					name: key,
					cnt: this.stateObj[key]
				});
			}
			
			// 建立联表查询用于查询用户订单以及用户订单详情
			const JQLdb = uniCloud.database();
			let usemallOrder = await JQLdb
				.collection('usemall-order')
				.where({
					is_delete: 0,
					create_uid: this.dataId,
					state: this.$db.$cmd.neq('待评价')
				})
				.getTemp();
			const query = {
				...(this.req.state && this.req.state !== '全部' ? { state: this.req.state } : {})
			};
			let usemallOrderAndDetail = await JQLdb.collection(usemallOrder, 'usemall-order-detail')
			.where(query)
			.orderBy(this.req.orderby)
			.skip((this.req.page - 1) * this.req.rows)
			.limit(this.req.rows)
			.get();

			// 联表查询到的用户以及订单数据
			let tableData = usemallOrderAndDetail.result.data;
			tableData.forEach((row, idx) => {
				if (idx == 0) {
					this.expandKeys.push(row._id);
				}

				row.imgs = [row.order_member_headimg ? row.order_member_headimg : ''];
				row.create_time = new Date(row.create_time).format();
				// row.order_details.every((x) => (x.imgs = [x.goods_img]));
				row.orderId = row.order_id[0].order_id;
			});
			this.tableDatas = tableData;
			console.log('this.tableDatas', this.tableDatas);

			this.$db[__name]
				.where({
					is_delete: 0,
					create_uid: this.dataId
				})
				.whereif(this.req.state && this.req.state != '全部', {
					state: this.req.state
				})
				.withgroup({
					field: 'state',
					obj: this.stateObj
				})
				.totable(this.req)
				.then((res) => {
					console.log(res, '------8848------');
					if (res.code == 200) {
						if (res.datas.group && res.datas.group.datas) {
							this.stateDatas = res.datas.group.datas;
						}

						// res.datas.rows.forEach((row, idx) => {
						// 	if (idx == 0) {
						// 		this.expandKeys.push(row._id);
						// 	}
						// 	row.imgs = [row.order_member_headimg];
						// 	row.create_time = new Date(row.create_time).format();
						// 	row.order_details = row.order_id['usemall-order-detail'];
						// 	row.order_details.every((x) => (x.imgs = [x.goods_img]));
						// 	row.order_id = row.order_details[0].order_id;
						// });
						// this.tableDatas = res.datas.rows;
						this.tableTotal = res.datas.total;
					}
				});
		},
		cutSta(item) {
			this.state = item.name;
			this.req.state = item.name;

			this.loadData();
		},
		sizeChange(size) {
			this.req.rows = size;
			this.loadData();
		},
		currentChange(current) {
			this.req.page = current;
			this.loadData();
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}

				if (!column.property) return;

				if (index === 3) {
					const values = data.map((item) => item[column.property] / 100);
					let totalMoney = eval(values.join('+'));
					if (typeof totalMoney === 'number') {
						sums[index] = `${totalMoney.toFixed(2)} 元`;
						let timer = setTimeout(() => {
							document.querySelector('.el-table__footer .has-gutter  td:nth-child(4) div').classList.add('price');
							this.$refs.etbl.doLayout();
						}, 0);
					}
					return;
				}

				if (index === 4) {
					const values = data.map((item) => item[column.property]);

					sums[index] = `${eval(values.join('+'))} 单`;
					return;
				}

				sums[index] = 'N/A';
			});

			return sums;
		}
	},
	created() {
		this.dataId = this.$route.query.id || '';
		this.loadData();
	},
	updated() {
		if (!this.tblHeight) {
			this.tblHeight = this.$refs.tbl.tblHeight;
		}
	}
};
</script>

<style>
.member_order .badge_txt {
	background-color: #fff;
}

.member_order .badge_txt:hover {
	background-color: #fff !important;
}

.order_detail {
	background-color: #f6f6f6;
}

.order_detail:last-child {
	border: 0;
	padding: 0;
	margin: 0;
}

.order_detail_right {
	height: 6.25rem;
}
</style>
